<template>
	<view>
		<view class="navigation-bar">
			<view @click="turnBack">
				<image src="/static/左箭头.png"></image>
			</view><text>确认订单</text>
		</view>
		<view class="background"></view>
		<view class="body">
			<view class="img1">
				<view>
					<image class="reservation1" src="/static/矩形 4.png" mode=""></image>
				</view>
				<view class="partition"></view>
				<view class="reservation">服务预约</view>
				<view>
					<image class="payment1" src="/static/矩形 4 拷贝.png" mode=""></image>
				</view>
				<view class="partition"></view>
				<view class="payment">支付订单</view>
				<view>
					<image class="SS1" src="/static/矩形 4 拷贝 2.png" mode=""></image>
				</view>
				<view class="SS">门店服务</view>
			</view>
			<view class="merchant">
				<view>
					<image src="/static/商家.png"></image>
				</view>
				<view class="address">
					<view>伟业汽车美容店（人民路店）</view>
					<view>山阳区人民路中路33号</view>
				</view>
			</view>
			<view class="staff">
				<view class="staff1">
					<image src="/static/人员.png" mode=""></image>
					<view>张先生</view>
				</view>
				<view>18656894566</view>
			</view>
			<view class="vehicle" @click="open2">
				<view class="vehicle1">
					<image src="/static/车辆-01.png" mode=""></image>
					<view>立即预约</view>
				</view>
				<view>
					<image src="/static/收起箭头小 拷贝.png"></image>
				</view>
			</view>
			<view class="car">
				<view class="car1" @click="chooseCar">
					<image src="/static/车辆-01(1).png" mode=""></image>
					<view>奔驰FWE4/豫A6487</view>
				</view>
				<view>
					<image src="/static/收起箭头小 拷贝.png"></image>
				</view>
			</view>
			<view class="product1">
				<view class="product">
					<view>服务产品</view>
					<view>共选则<text>2项</text>服务产品</view>
				</view>
				<view class="setMenu">
					<view>
						<text>小保养套餐1(合成机油+机滤)</text><text>$39.9</text>
					</view>
				</view>
				<view class="setMenu">
					<view>
						<text>小保养套餐1(合成机油+机滤)</text><text>$49.9</text>
					</view>
				</view>
			</view>
			<view class="coupon1">
				<view class="coupon" @click="chooseDiscount">
					<image src="/static/优惠券.png" mode=""></image>
					<view>代金卷/优惠券</view>
				</view>
				<view class="money">
					<view>-10元</view>
					<image src="/static/收起箭头小 拷贝.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="bottom"></view>
		<view class="customerService">
			<view class="contact" >
				<image src="/static/客服.png" mode="" @click="open3"></image>
				<view @click="open3">联系客服</view>
			</view>
			<view class="submit">
				<view>合计：￥79.8</view>
				<button @click="open1">提交订单</button>
			</view>
		</view>
		<uni-popup ref="popup1" type="center" background-color="#fff" border-radius="10px">
			<view class="popup">
				<view class="paymentPassword">
					<image src="/static/错.png" mode=""></image>
					<text>请输入支付密码</text>
				</view>
				<view class="paymentRecipient">
					车辆服务平台
				</view>
				<view class="amountOfMoney">
					￥39.90
				</view>
				<view class="paymentMethod">
					<view>支付方式</view>
					<view><text>零钱</text>
						<image src="/static/收起箭头小@2x.png"></image>
					</view>
				</view>
				<view class="password">
					<input v-for="(item, index) in 6" :key="index"  :ref="'input' + index" type="number" maxlength="1" @input="handleInput($event, index)" @keydown="handleKeydown($event, index)" />
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="popup2" type="center" background-color="#fff" border-radius="10px">
			<view class="popup">
				<view class="timeOfAppointment">
					<text>预约时间</text>
				</view>
				<view class="date">
					<text>(2023年3月13日</text><text>11:52)</text>
				</view>
				<view class="immediately">
					<text>立即预约</text>
				</view>
				<view class="paymentMethod">
					<picker-view v-if="visible" :indicator-style="indicatorStyle" :mask-style="maskStyle" :value="value"
						@change="bindChange">
						<picker-view-column>
							<view class="item" v-for="(item,index) in dates" :key="index">{{item}}</view>
						</picker-view-column>
						<picker-view-column>
							<view class="item" v-for="(item,index) in times" :key="index">{{item}}</view>
						</picker-view-column>
					</picker-view>
				</view>
				<view class="button1">
					<text>取消</text>
					<text>确定</text>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="popup3" type="bottom" background-color="#fff" border-radius="10px 10px 0 0">
			<view class="pop">
				<view class="number">
					18642589456
				</view>
				<view class="copy">
					复制
				</view>
				<view class="dial">
					取消拨号
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			const date = new Date()
			const month = date.getMonth() + 1
			const days = []
			const day = date.getDate()
			return {
				month,
				days,
				day,
				value: [9999, month - 1, day - 1],
				visible: true,
				indicatorStyle: `height: 50px;`,
				maskStyle: "padding:10px 0",
				maskStyle: "",
				dates: [],
				times: [],
				inputs: ['', '', '', '', '', '']
			}
		},
		created() {
			// 调用生成日期和时间的方法
			this.generateDates();
			this.generateTimes();
		},
		onLoad() {
			// 页面加载时让第一个输入框获取焦点
			this.$nextTick(() => {
				this.$refs.input0.focus();
			});
		},
		methods: {
			open3() {
				this.$refs.popup3.open('bottom')
			},
			open1() {
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				this.$refs.popup1.open('center')
			},
			open2() {
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				this.$refs.popup2.open('center')
			},
			bindChange(e) {
				const val = e.detail.value
				this.year = this.years[val[0]]
				this.month = this.months[val[1]]
				this.day = this.days[val[2]]
			},
			generateDates() {
				// 遍历 2020 年至 2030 年
				for (let year = 2020; year <= 2030; year++) {
					// 遍历 1 月至 12 月
					for (let month = 1; month <= 12; month++) {
						// 获取该月的天数
						let daysInMonth = new Date(year, month, 0).getDate();
						// 遍历该月的每一天
						for (let day = 1; day <= daysInMonth; day++) {
							// 格式化日期并添加到数组
							this.dates.push(`${month}月${day}日`);
						}
					}
				}
			},
			generateTimes() {
				// 遍历 9 点至 22 点
				for (let hour = 9; hour <= 22; hour++) {
					// 格式化时间并添加到数组
					this.times.push(`${hour}:00`);
				}
			},
			handleInput(e, index) {
			  const value = e.detail.value;
			  if (/^[0-9]$/.test(value)) {
			    this.inputs[index] = value;
			    if (index < 5) {
			      this.$refs['input' + (index + 1)].focus();
			    } else {
			      const password = this.inputs.join('');
			      console.log('拼接后的密码:', password);
			    }
			  } else {
			    this.inputs[index] = '';
			  }
			},
			handleKeydown(e, index) {
			  if (e.key === 'Backspace' && index > 0 && this.inputs[index] === '') {
			    this.$refs['input' + (index - 1)].focus();
			  }
			},
			turnBack() {
				uni.navigateBack({
					url: "/pages/index/index"
				})
			},
			chooseCar() {
				uni.navigateTo({
					url: "/packageMaintenance/pages/selectVehicle/selectVehicle"
				})
			},
			chooseDiscount() {
				uni.navigateTo({
					url: "/packageMaintenance/pages/coupon/coupon"
				})
			},
			paymentJump() {
				uni.navigateTo({
					url: "/packageMaintenance/pages/paySuccess/paySuccess"
				})
			}
		}
	}
</script>

<style>
	.navigation-bar {
		position: relative;
		height: 150rpx;
		display: flex;
		align-items: center;
		background-color: #287BF6;
	}

	.navigation-bar>view>image {
		width: 30rpx;
		height: 30rpx;
		margin-left: 30rpx;
	}

	.navigation-bar>text {
		color: #FFF;
		margin-right: 40rpx;
		flex-grow: 1;
		text-align: center;
	}

	.background {
		position: absolute;
		background-color: #287BF6;
		width: 100%;
		height: 300rpx;
		z-index: 0;
	}

	.body {
		position: relative;
		margin: 20rpx;
		border-radius: 20rpx;
		background-color: #FFF;
	}

	.img1 {
		display: flex;
		position: relative;
		border-bottom: 5px solid #E8E8E8;
		margin: 0 20rpx;
		padding-bottom: 30rpx;
	}

	.img1>view>image {
		width: 100rpx;
		height: 100rpx;
	}

	.partition {
		width: 150rpx;
		height: 1rpx;
		margin-top: 80rpx;
		border-bottom: 1px dashed #E8E8E8;
	}

	.reservation1 {
		margin-top: 30rpx;
		margin-left: 50rpx;
	}

	.payment1 {
		margin-top: 30rpx;
	}

	.SS1 {
		margin-top: 30rpx;
	}

	.reservation {
		position: absolute;
		width: 70rpx;
		top: 45rpx;
		left: 75rpx;
		color: #FFF;
		font-size: 25rpx;
		font-weight: bold;
	}

	.payment {
		position: absolute;
		width: 70rpx;
		top: 45rpx;
		left: 325rpx;
		color: #FFF;
		font-size: 25rpx;
		font-weight: bold;
	}

	.SS {
		position: absolute;
		width: 70rpx;
		top: 45rpx;
		right: 25rpx;
		color: #FFF;
		font-size: 25rpx;
		font-weight: bold;
	}

	.merchant {
		margin: 20rpx;
		display: flex;
		align-items: center;
	}

	.merchant>view>image {
		width: 40rpx;
		height: 40rpx;
	}

	.address {
		margin-left: 20rpx;
	}

	.address>view:nth-child(1) {
		font-weight: bold;
	}

	.address>view:nth-child(2) {
		color: #979797;
	}

	.staff {
		display: flex;
		justify-content: space-between;
		margin: 0 20rpx;
	}

	.staff1 {
		display: flex;
	}

	.staff1>image {
		width: 40rpx;
		height: 40rpx;
	}

	.staff1>view {
		margin-left: 20rpx;
		font-weight: bold;
	}

	.staff>view:nth-child(2) {
		color: #979797;
	}

	.vehicle {
		display: flex;
		justify-content: space-between;
		margin: 20rpx;
		font-weight: bold;
	}

	.vehicle1 {
		display: flex;
	}

	.vehicle1>image {
		width: 40rpx;
		height: 40rpx;
	}

	.vehicle1>view {
		margin-left: 20rpx;
	}

	.vehicle>view:nth-child(2)>image {
		width: 20rpx;
		height: 30rpx;
	}

	.car {
		display: flex;
		justify-content: space-between;
		margin-left: 20rpx;
		margin-right: 20rpx;
		margin-top: 20rpx;
		padding-bottom: 20rpx;
		border-bottom: 1px solid #E8E8E8;
		font-weight: bold;
	}

	.car1 {
		display: flex;
	}

	.car1>image {
		width: 40rpx;
		height: 40rpx;
	}

	.car1>view {
		margin-left: 20rpx;
	}

	.car>view:nth-child(2)>image {
		width: 20rpx;
		height: 30rpx;
	}

	.product1 {
		border-bottom: 1px dashed #E8E8E8;
		margin: 0 20rpx;
	}

	.product {
		display: flex;
		justify-content: space-between;
		margin: 20rpx;
	}

	.product>view:nth-child(1) {
		font-weight: bold;
	}

	.product>view:nth-child(2) {
		font-weight: bold;
		font-size: 25rpx;
	}

	.product>view:nth-child(2)>text {
		color: #287BF6;
	}

	.setMenu {
		margin: 20rpx;
		font-weight: bold;
	}

	.setMenu>view {
		display: flex;
		justify-content: space-between;
	}

	.setMenu>view>text:nth-child(2) {
		color: #FB3F00;
	}

	.coupon1 {
		display: flex;
		justify-content: space-between;
		margin: 20rpx;
	}

	.coupon {
		display: flex;
	}

	.coupon>view {
		margin-left: 20rpx;
		font-weight: bold;
	}

	.coupon>image {
		width: 40rpx;
		height: 40rpx;
	}

	.money {
		display: flex;
	}

	.money>view {
		margin-right: 20rpx;
		color: #FB3F00;
		font-weight: bold;
		padding-bottom: 30rpx;
	}

	.money>image {
		width: 20rpx;
		height: 30rpx;
		margin-top: 5rpx;
	}

	.bottom {
		height: 20rpx;
	}

	.customerService {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #FFF;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.contact {
		display: flex;
		margin-left: 20rpx;
	}

	.contact>view {
		font-weight: bold;
		margin-left: 10rpx;
	}

	.contact>image {
		width: 40rpx;
		height: 40rpx;
	}

	.submit {
		display: flex;
		align-items: center;
		margin-right: 20rpx;
	}

	.submit>view {
		margin-right: 10rpx;
		color: #FB3F00;
	}

	.submit>button {
		width: 250rpx;
		height: 60rpx;
		border-radius: 40rpx;
		background-color: #287BF6;
		color: #FFF;
		line-height: 60rpx;
		font-size: 30rpx;
	}

	.pop {
		text-align: center;
	}

	.number {
		margin-top: 30rpx;
		padding-bottom: 30rpx;
		border-bottom: 1px solid #E8E8E8;
	}

	.copy {
		margin-top: 30rpx;
		padding-bottom: 30rpx;
		border-bottom: 3px solid #E8E8E8;
	}

	.dial {
		margin-top: 30rpx;
		padding-bottom: 30rpx;
	}

	.paymentPassword {
		font-weight: bold;
	}

	.paymentPassword>image {
		width: 25rpx;
		height: 25rpx;
		margin-top: 30rpx;
		margin-left: 30rpx;
		margin-right: 120rpx;
	}

	.paymentRecipient {
		text-align: center;
		margin-top: 30rpx;
	}

	.amountOfMoney {
		margin-top: 20rpx;
		text-align: center;
		font-size: 70rpx;
		font-weight: bold;
		margin-left: 30rpx;
		margin-right: 30rpx;
		padding-bottom: 40rpx;
		border-bottom: 2px solid #E8E8E8;
	}

	.paymentMethod {
		display: flex;
		justify-content: space-between;
		color: #979797;
		margin: 20rpx 40rpx;
	}

	.paymentMethod>view>text {
		margin-right: 10rpx;
	}

	.paymentMethod>view>image {
		width: 15rpx;
		height: 20rpx;
	}

	.password {
		text-align: center;
		display: flex;
		margin: 30rpx;
	}

	.password>input {
		background-color: #F2F2F2;
		margin: 10rpx;
		width: 60rpx;
		height: 60rpx;
	}

	.timeOfAppointment {
		text-align: center;
		margin-top: 30rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
		margin-bottom: 10rpx;
		font-size: 40rpx;
		font-weight: bold;
	}

	.date {
		text-align: center;
		margin-left: 20rpx;
		margin-right: 20rpx;
		color: #979797;
		font-size: 28rpx;
		padding-bottom: 10rpx;
		border-bottom: 2px solid #E8E8E8;
	}

	.date>text:nth-child(1) {
		margin-right: 20rpx;
	}

	.immediately {
		margin-top: 20rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
		padding-bottom: 20rpx;
		border-bottom: 1px solid #E8E8E8;
	}

	.immediately>text {
		margin-left: 10rpx;
		font-size: 32rpx;
	}

	.paymentMethod {
		border-bottom: 1px solid #E8E8E8;
	}

	.button1 {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20rpx;
	}

	picker-view {
		width: 500rpx;
		height: 300rpx;
	}

	.item {
		line-height: 100rpx;
		text-align: center;
	}

	.button1>text:nth-child(1) {
		margin-left: 150rpx;
		border-right: 2px solid #E8E8E8;
		padding-right: 90rpx;
		height: 35rpx;
	}

	.button1>text:nth-child(2) {
		margin-right: 150rpx;
	}

	.popup {
		padding-top: 10rpx;
		background-color: #FFF;
		border-radius: 10px;
		padding-bottom: 10rpx;
	}
</style>